<template>
  <div class="dashboard-container">
    <div class="dashHeader"  >
      <span style="float: left; width: 4px; height: 20px; background-color: #25B6C7; margin-left: 20px "></span>
      <span style="float: left; vertical-align: middle; font-size: 16px;color:rgba(255,255,255,1)">&nbsp;可视化监测地图</span>

      <router-link to="/monitor/overview/list">
        <span title="站点列表">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px" width="30px"
	 height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve" >
          <g id="内容">
            <g>
              <g>
                <polygon fill="#25B7C8" points="5,13 5,5 13,5 13,3 3,3 3,13 			"/>
                <polygon fill="#25B7C8" points="3,19 11,19 11,27 13,27 13,17 3,17 			"/>
                <polygon fill="#25B7C8" points="11,3 11,11 3,11 3,13 13,13 13,3 			"/>
                <polygon fill="#25B7C8" points="13,25 5,25 5,17 3,17 3,27 13,27 			"/>
                <rect x="15" y="10" fill="#25B7C8" width="12" height="2"/>
                <rect x="15" y="4" fill="#25B7C8" width="12" height="2"/>
                <rect x="15" y="18" fill="#25B7C8" width="12" height="2"/>
                <rect x="15" y="24" fill="#25B7C8" width="12" height="2"/>
              </g>
            </g>
          </g>
</svg>
        </span>
      </router-link>

      <span style="position: absolute; margin-top: 0px; margin-left: -60px" title="全屏">
      <screenfull class="screenfull right-menu-item"></screenfull>
      </span>
    </div>
    <div class="displayColor"  @mouseover="this.showSearchBloak">
      <span style=" float:left;width: 20px;height: 20px; background-color: #25B6C7; margin-left: 20px;margin-top: 14px"></span>
      <span style="padding-left: 5px; float: left"> 总监测数：{{this.countData.Total}}</span>
      <span style="float:left;width: 20px;height: 20px; background-color: #3FB05A; margin-left: 20px;margin-top: 14px"></span>
      <span style="padding-left: 5px; float: left"> 在线数量：{{this.countData.OnLine}}</span>
      <span style="float:left;width: 20px;height: 20px; background-color: #999999; margin-left: 20px;margin-top: 14px"></span>
      <span style="padding-left: 5px"> 离线数量：{{this.countData.OffLine}}</span>
    </div>
    <div class="mouseOver" v-show="showSearch">
      <el-row>
        <el-col :span="19">
          <div class="grid-content bg-purple check">
            <el-checkbox v-model="checked1" >维保到期：16</el-checkbox>
            <el-checkbox v-model="checked2" >零配件到期：12</el-checkbox>
            <el-checkbox v-model="checked3" >年审到期：10</el-checkbox>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content bg-purple-light select">
            <span class="userName" >客户名称：</span>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-button type="primary" size="small">查询</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <img :src="topLeft" class="img1"/>
    <img :src="topRight" class="img2"/>
    <img :src="bottomLeft" class="img3"/>
    <img :src="bottomRight" class="img4"/>
    <div class="bMap">
      <div id="assetMap" :style="{height:'38vw',width:'100%', color:'#fff'}"></div>
    </div>
  </div>
</template>
<script>
import BaiduMap from '@/api/map.js'
import topLeft from '@/assets/home/topLeft.png'
import topRight from '@/assets/home/topRight.png'
import bottomLeft from '@/assets/home/bottomLeft.png'
import bottomRight from '@/assets/home/bottomRight.png'
import gaojin from '@/assets/mapStatus/gaojin.png'
import jinjigaojin from '@/assets/mapStatus/jinjigaojin.png'
import lixian from '@/assets/mapStatus/lixian.png'
import yanzhongjingaoicon from '@/assets/mapStatus/yanzhongjinggaoicon.png'
import yibanjigaoicon from '@/assets/mapStatus/yibanjigaoicon.png'
import zhengcang from '@/assets/mapStatus/zhengcang.png'
import Screenfull from '@/components/Screenfull'

import axios from 'axios'

export default {
  name: 'dashboard',
  data() {
    return {
      gaojin,
      jinjigaojin,
      lixian,
      yanzhongjingaoicon,
      yibanjigaoicon,
      zhengcang,
      status: '',
      point: [], // 存放标注点经纬信息的数组
      marker: [], // 存放标注点对象的数组
      info: [], // 存放提示信息窗口对象的数组
      searchInfoWindow: [], // 存放检索信息窗口对象的数组
      data_info: [],
      content: '',
      showSearch: false,
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      checked1: false,
      checked2: false,
      checked3: false,
      topLeft,
      topRight,
      bottomLeft,
      bottomRight,
      mapData: '',
      pids: 'ZD201809000002', // 站点编号
      pid1: 'ZD201809000001', // 站点编号
      coordinateX: '', // 横坐标
      coordinateY: '', // 纵坐标
      chart: null,
      date: new Date(),
      time: '',
      name: '',
      create_time: '',
      conn_status: '',
      countData: [],
      submitdata: {
        access_token: 'token_950000100',
        type: 'station_condition',
        data: {
          condition: {
            pid: '',
            name: '',
            create_time: '',
            orde_no: '',
            cit: '',
            longitude: '',
            latitude: '',
            authz: '',
            conn_status: ''
          },
          page: {
            page_size: '10',
            page_number: '1'
          }
        }
      },
      submitEquipData: {
        access_token: 'token_950000100',
        type: 'object_condition',
        pid: '',
        data: {
          condition: {
            gid: '',
            cid: '',
            name: '',
            brand: '',
            catagory: '',
            param: '',
            type: '',
            addr: '',
            attris_file: ''
          },
          page: {
            page_size: '1000',
            page_number: '1'
          }
        }
      },
      submitCount: {
        access_token: 'access_tokenxxxxxxxx',
        type: 'station_get_total'
      }
    }
  },
  created() {
  },
  components: {
    Screenfull
  },
  mounted() {
    this.queryData()
    // 百度地图API功能
    // 创建Map实例
    this.getNowFormatDate()
    this.queryCount()
    BaiduMap.init()
      .then((BMap) => {
        console.log(BMap)
        const map = new BMap.Map('assetMap', { enableMapClick: true })
        map.centerAndZoom(new BMap.Point(116.989493, 28.81615), 15)
        map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
        var opts = {
          width: 200, // 信息窗口宽度
          height: 120, // 信息窗口高度
          title: '', // 信息窗口标题 万年县伟明环保能源有限公司
          enableMessage: true, // 设置允许信息窗发送短息
          message: 'xxxxxxx',
          border: ''
        }
        for (let i = 0; i < this.data_info.length; i++) {
          console.log(this.data_info[i].pid)
          const deviceSize = new BMap.Size(36, 54) // 自定义图片大小
          const deviceIcon1 = new BMap.Icon(lixian, deviceSize, { // 中断状态
            imageSize: deviceSize
          })
          const deviceIcon2 = new BMap.Icon(zhengcang, deviceSize, { // 正常状态
            imageSize: deviceSize
          })
          const deviceIcon3 = new BMap.Icon(gaojin, deviceSize, { // 告警状态
            imageSize: deviceSize
          })
          const deviceIcon4 = new BMap.Icon(jinjigaojin, deviceSize, { // 紧急告警状态
            imageSize: deviceSize
          })
          const deviceIcon5 = new BMap.Icon(yanzhongjingaoicon, deviceSize, { // 严重告警状态
            imageSize: deviceSize
          })
          if (this.data_info[i].conn_status === '中断') {
            this.status = deviceIcon1
          } else if (this.data_info[i].conn_status === '正常') {
            this.status = deviceIcon2
          } else if (this.data_info[i].conn_status === '告警') {
            this.status = deviceIcon3
          } else if (this.data_info[i].conn_status === '紧急告警') {
            this.status = deviceIcon4
          } else {
            this.status = deviceIcon5
          }
          var p0 = this.data_info[i].longitude
          var p1 = this.data_info[i].latitude
          var marker = new BMap.Marker(new BMap.Point(p0, p1), { icon: this.status }) // 创建标注
          var content = '<div class="exam_bus_sel_details" style="font-size: 12px; line-height: 20px;"><div>' +
            '<div class="exam_bus_sel_details_bus">项目地址：' + this.data_info[i].city + '</div>' +
            '<div class="exam_bus_sel_details_busnumber1">站点编号：' + this.data_info[i].pid + '</div>' +
            '<div class="exam_bus_sel_details_busnumber">站点名称：' + this.data_info[i].name + '</div>' +
            '<div class="exam_bus_sel_details_busnumber">接入时间：' + this.data_info[i].create_time + '</div>' +
            '<div class="exam_bus_sel_details_busnumber">项目状态：' + this.data_info[i].conn_status + '</div>' +
            '</div></div></div>'
          map.addOverlay(marker)
          addClickHandler(content, marker)
        }
        function addClickHandler(content, marker) {
          marker.addEventListener('onmouseover', function(e) {
            openInfo(content, e)
          })
          marker.addEventListener('click', function(e) {
            var ss = document.getElementsByClassName('exam_bus_sel_details_busnumber1')[0]
            var pidnumber = ss.innerHTML.slice(5)
            window.location.href = '#/realTime?pid=' + pidnumber
          })
        }
        function openInfo(content, e) {
          var p = e.target
          var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat)
          var infoWindow = new BMap.InfoWindow(content, opts) // 创建信息窗口对象
          map.openInfoWindow(infoWindow, point) // 开启信息窗口
        }
      })
  },
  methods: {
    // 初始化地图
    lookRow() {
      var looknumber = this.pid
      this.$router.push({
        path: '/',
        query: {
          pid: looknumber
        }
      })
    },
    // 获取时间
    getNowFormatDate() {
      var _this = this
      var sign1 = '-'
      var sign2 = ':'
      var year = _this.date.getFullYear() // 年
      var month = _this.date.getMonth() + 1 // 月
      var day = _this.date.getDate() // 日
      var hour = _this.date.getHours() // 时
      var minutes = _this.date.getMinutes() // 分
      var seconds = _this.date.getSeconds() // 秒
      // 给一位数数据前面加 “0”
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (day >= 0 && day <= 9) {
        day = '0' + day
      }
      if (hour >= 0 && hour <= 9) {
        hour = '0' + hour
      }
      if (minutes >= 0 && minutes <= 9) {
        minutes = '0' + minutes
      }
      if (seconds >= 0 && seconds <= 9) {
        seconds = '0' + seconds
      }
      this.time = year + sign1 + month + sign1 + day + ' ' + hour + sign2 + minutes + sign2 + seconds
      return this.time
    },
    // 获取城市坐标接口
    queryData() {
      // 站点总览
      axios.post('/station', this.submitdata, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).then((res) => {
        this.mapData = res
        this.data_info = res.data.data.items
        console.log(this.markerArr)
        this.pids = this.mapData.data.data.items[0].pid
        this.pid1 = this.mapData.data.data.items[1].pid
        this.coordinateX = res.data.data.items[0].longitude
        this.coordinateY = res.data.data.items[0].latitude
        this.name = res.data.data.items[0].name
        this.create_time = res.data.data.items[0].create_time
        this.conn_status = res.data.data.items[0].conn_status
      })
        .catch(function(error) {
          console.log(error)
        })
    },
    // 获取设备名称
    queryEquipNameData() {
      // this.submitEquipData.pid = this.pid
      axios.post('/station', this.submitEquipData, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).then((res) => {
        console.log(555555555)
        console.log(res)
      })
        .catch(function(error) {
          console.log(error)
        })
    },
    // 跳转到实时监控页面
    goRealData() {
      this.$router.push({ path: '/realTime/todayData' })
    },
    // 显示搜索框
    showSearchBloak() {
      this.showSearch = !this.showSearch
    },
    // 获取监控数量
    queryCount() {
      axios.post('/station', this.submitCount, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).then((res) => {
        this.countData = res.data.data
        console.log(this.countData)
      })
        .catch(function(error) {
          console.log(error)
        })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
  &-container {
    margin: 0;
    color: #fff;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
    color: #fff;

  }

}
.dashboard-container{
  width: 100%;
  height:53.65vw;
  background-color: #0F1516;
  .dashHeader{
    width: 99%;
    height: 50px;
    text-align: right;
    padding: 20px 0 0 0;
  }
  .displayColor{
    height: 50px;
    width: 100%;
    line-height: 50px;
  }
  .img1{
    left: 20px;
    position: absolute;
  }
  .img2{
    position: absolute;
    right: 20px;
  }
  .img3{
    position: absolute;
    left: 20px;
    top:44vw;
  }
  .img4{
    position: absolute;
    right: 20px;
    top:44vw;
  }
  .bMap{
    width: 98%;
    height: 40vw;
    border: 20px solid #181E28;
    margin: 0 auto;
  }
  .mouseOver{
    width: 95.8%;
    height: 50px;
    margin-left: 40px;
    background-color: #FDFDFD;
    opacity: 0.8;
    position: absolute;
    margin-top: 20px;
    z-index: 100;
    .check{
      line-height: 50px;
      margin-left: 20px;
      font-size:12px;
      font-family:MicrosoftYaHei;
      font-weight:400;
      color:rgba(51,51,51,1);
    }
    .select{
      float: right;
      margin-right: 10px;
      .userName{
        font-size:14px;
        font-family:MicrosoftYaHei;
        font-weight:400;
        color:rgba(105,114,126,1);
      }
    }
  }
 /*/deep/ .BMap_pop .BMap_center {*/
    /*border-left: 1px solid #555F70;*/
    /*border-right: 1px solid #555F70;*/
    /*background-color: #555F70;*/
  /*}*/
 /*/deep/ .BMap_top {*/
    /*background-color: #555F70;*/
  /*}*/
 /*/deep/ .BMap_top div{*/
    /*background-color: #555F70;*/
  /*}*/
  @media screen and(min-width: 1366px){
    .img3{
      position: absolute;
      left: 16px;
      top:47.8vw;
    }
    .img4{
      position: absolute;
      right: 16px;
      top:47.8vw;
    }
  }
  @media screen and(min-width: 1920px) {
    .img3 {
      position: absolute;
      left: 20px;
      top: 47vw;
    }
    .img4 {
      position: absolute;
      right: 20px;
      top: 47vw;
    }
  }
}

</style>
